import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Pagination, Tag, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { operationLogListLength, returnOperationListData, searchOperationLogList, clearOperationLogList } from '@/api/log/index';

const OperationLog = () => {
  const [name, setName] = useState('');
  const [tableData, setTableData] = useState([]);
  const [paginationData, setPaginationData] = useState({
    operationTotal: 1,
    operationPageCount: 1,
    operationCurrentPage: 1,
  });

  // 获取操作日志总数
  const getOperationListLength = async () => {
    const res = await operationLogListLength();
    setPaginationData(prev => ({
      ...prev,
      operationTotal: res.length,
      operationPageCount: Math.ceil(res.length / 10),
    }));
  };

  // 获取操作日志的第一页数据
  const getOperationFirstPageList = async () => {
    const data = await returnOperationListData(1);
    setTableData(data);
  };

  useEffect(() => {
    getOperationListLength();
    getOperationFirstPageList();
  }, []);

  // 操作日志换页
  const handlePageChange = async (page) => {
    setPaginationData(prev => ({ ...prev, operationCurrentPage: page }));
    const data = await returnOperationListData(page);
    setTableData(data);
  };

  // 搜索操作人员
  const searchOperationPerson = async () => {
    if (!name) {
      getOperationListLength();
      getOperationFirstPageList();
      return;
    }
    const data = await searchOperationLogList(name);
    setTableData(data);
  };

  // 清空日志
  const clearLog = async () => {
    const res = await clearOperationLogList()
    if (res.status === 0) {
      message.success('操作日志已清空');
      getOperationListLength();
      getOperationFirstPageList();
    }
  };

  // 操作等级样式
  const getLevelClass = (level) => {
    if (level === '高级') return '#f50';
    if (level === '中级') return '#2db7f5';
    if (level === '低级') return '#87d068';
    return '';
  };

  // 表格列配置
  const columns = [
    {
      title: '操作者',
      dataIndex: 'operation_person',
      key: 'operation_person',
      render: (text, row) => (
        <div className={getLevelClass(row.operation_level)}>
          <span className="person">{text}</span>
        </div>
      ),
    },
    {
      title: '操作内容',
      dataIndex: 'operation_content',
      key: 'operation_content',
    },
    {
      title: '操作等级',
      dataIndex: 'operation_level',
      key: 'operation_level',
      render: (text) => <Tag className="ml-2" color={getLevelClass(text)}>{text}</Tag>,
    },
    {
      title: '操作时间',
      dataIndex: 'operation_time',
      key: 'operation_time',
      render: (text) => <div>{text?.slice(0, 16)}</div>,
    },
  ];

  return (
    <div className="table-wrapped">
      <div className="table-top">
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <Input
              className="w-50 m-2"
              size="large"
              placeholder="输入操作者进行搜索"
              prefix={<SearchOutlined />}
              value={name}
              onChange={(e) => setName(e.target.value)}
              onPressEnter={searchOperationPerson}
              allowClear
            />
          </div>
          <div className="upload-wrapped">
            <Button type="primary" onClick={clearLog}>
              清空操作日志
            </Button>
          </div>
        </div>
        <div className="table-content">
          <Table
            columns={columns}
            dataSource={tableData}
            pagination={false}
            rowKey="id"
            style={{ width: '100%' }}
          />
        </div>
      </div>
      <div style={{
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: 20,
      }}>
        <Pagination
          current={paginationData.operationCurrentPage}
          pageSize={1}
          total={paginationData.operationTotal}
          onChange={handlePageChange}
          showSizeChanger={false}
          showQuickJumper
        />
      </div>
    </div>
  );
};

export default OperationLog;
